import React from 'react';
import moment from 'moment';
import Echarts from 'echarts-for-react';
import {Card, Empty, Spin} from 'antd';
import {mergeEchartsOption} from '../common/utils';

// 定义legend顺序
const legendOrderMap = {
    已付款订单数: 0,
    全额退款订单数: 1,
    部分退款订单数: 2,
    自动取消订单数: 3,
    手动取消订单数: 4
};

const setDefaultLegend = chart => {
    const selectKeyword = '已付款订单数';
    const {legend = {}, ...rest} = chart || {};
    const {data = []} = legend || {};
    // 需要对legend按照订单状态进行排序
    data?.sort((a, b) => {
        const aOrderType = a?.split('-')?.[2] ?? 'unknown';
        const bOrderType = b?.split('-')?.[2] ?? 'unknown';
        const aOrder = legendOrderMap[aOrderType] ?? 100;
        const bOrder = legendOrderMap[bOrderType] ?? 100;
        return aOrder - bOrder;
    });
    const selected = {};
    data?.forEach(item => {
        if (item.indexOf(selectKeyword) > -1) {
            if (typeof item === 'string' && item?.length > 0) {
                selected[item] = true;
            }
        } else {
            // eslint-disable-next-line no-lonely-if
            if (typeof item === 'string' && item?.length > 0) {
                selected[item] = false;
            }
        }
    });
    const newLegend = {...(legend || {}), selected};
    return {...rest, legend: newLegend};
};

const OrdersChartCard = props => {
    const {data = {}, loading, dashBoard = {}, unitId} = props;

    const dashBoardId = dashBoard?.dashBoardId;
    const unit = dashBoardId ? data?.[dashBoardId]?.[unitId] : {};
    const {chart, unitName = ''} = unit || {};

    if (chart) {
        // tooltip
        const tooltipCallback = (params = []) => {
            const tooltipList = params.map((chartItem, index) => {
                const {marker, name, seriesName, value} = chartItem;
                let result = '';
                if (index === 0) {
                    result = `${moment(name, 'YYYYMMDD').format(
                        'YYYY-MM-DD'
                    )}<br/>${marker}${seriesName}: ${value}`;
                } else {
                    result = `<br/>${marker}${seriesName}: ${value}`;
                }
                return result;
            });
            return tooltipList.join('');
        };
        // x轴label
        const xAxisLabelFormatter = (value, index) =>
            moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
        // 扩展配置项
        const extendOptions = {
            chartId: 'RefundOnTeacherBarChart',
            tooltip: {
                trigger: 'axis',
                // axisPointer: {
                //     type: 'cross'
                // },
                formatter: tooltipCallback
            },
            dataZoom: [
                {
                    type: 'inside'
                },
                {
                    type: 'slider'
                }
            ],
            yAxis: {
                common: {
                    // 后端返回的坐标轴名称太长了
                    name: '订单数',
                    // 不显示参考线
                    splitLine: {show: false}
                }
            },
            xAxis: {
                common: {
                    axisLabel: {
                        formatter: xAxisLabelFormatter
                    }
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 0,
                bottom: 0
            },
            grid: {
                left: 20,
                right: 350,
                bottom: 40,
                containLabel: true
            },
        };

        const newChart = setDefaultLegend(chart);
        const options = mergeEchartsOption(newChart, extendOptions);
        return (
            <Card
                title={unitName || '不同状态订单数'}
                // bordered={false}
                className="orders-chart-card"
            >
                <Spin spinning={loading}>
                    <Echarts option={options} notMerge />
                </Spin>
            </Card>
        );
    }

    return (
        <Card title="不同状态订单数" className="orders-chart-card with-empty">
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        </Card>
    );
};

export default OrdersChartCard;
